<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>上传图片</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<style>
			body {
				background: #Fff;
			}
			
			.filecontainer {
				position: relative;
				width: 99px;
				height: 30px;
			}
			
			.filecontainer input.file,
			.filecontainer input.text {
				padding: 0px;
				width:99px;
				height:30px !important;
				position: absolute;
				left: 0px;
				top: 0px;
				text-align: center;
			}
			 input.text{
			 	height:30px !important;
			 }
			.filecontainer .file {
				opacity: 0;
				z-index: 2;
			}
			.filecontainer .showFileName{margin-left:140px;width:100px;line-height: 30px;}
			.mt13{margin-top:13px;} .mt20{margin-top:30px;}
			.Wt300{width:300px !important;}
			.defaultimg{width:152px;}
			.item{background:#eee;padding:20px;}
			.layui-layer-hui .layui-layer-content{color:#fff;}
		</style>
	</head>
<p></p>
	<body>
		<div class="form" style="padding:20px 40px;">
			<form class="block-form" id="commentForm">
				<div class="itemlist">
					<div class="border over-hidden item first">
						<div class="fl">
							<div class="filecontainer">
								<input type="file" class=" file  border-radius"  id="selectfile" accept="" />
								<input type="button" class=" text border-radius bgblue"   disabled="" value="选择上传" />
								<span class="showFileName inline-block text-ellipsis " id="filename"  >未选择文件</span>
							</div>
							<p class="red mt13">上传的广告图比例：宽640px * 高340px</p>
							<input type="text" placeholder="请填写链接地址"  class="mt13 Wt300"  />
							<div class="mt13">
								<input type="button" class=" text text-center border-radius bgblue addPic"  value="添加一项" onclick="add(this)" />
								<input type="button" class=" text text-center border-radius bgblue delePic none"  value="删除一项" onclick="deleteObj(this)" />
							</div>
						</div>

						<div class="fr">
							<img src="images/defaultImg.png" class="defaultimg"/>
						</div>

					</div>
					
					

				</div>
				
				<div class="clearfix"></div>

				<div class="fr" style="margin-top:20px;margin-bottom:20px;">
					<input type="button" value="提交并设置" class="search-input-button bgblue" id="subButton" />
					<input type="button" value="返回" class="search-input-button " id="backButton" style="margin-right:0px;" />
				</div>
			</form>
		</div>
        
        <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/js.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/layFun.js" type="text/javascript" charset="utf-8"></script>
        <script>
           var cloneNode;
           var itemlist=$('.itemlist');
           var itemlength,count=5;
           $(function(){
	           	$('#selectfile').change(function(){
	        		commonObj.selectfile(this);
	        	})
           })
           
           function add(){
           	   cloneNode=$('.item.first').clone();
           		$(cloneNode).addClass('mt20'); $(cloneNode).removeClass('first');
           		$(cloneNode).find('.addPic').addClass('none');
           		$(cloneNode).find('.delePic').removeClass('none');
           		 
				
           	   itemlength=$(itemlist).find('.item').length;
           	   if(itemlength<count){
           	   	$(cloneNode).appendTo($(itemlist));
           	   }else{
           	   	 layObj.msg('最多只能添加5个图片！');
           	   }
           	   
           }
           
           function deleteObj(obj){
              $(obj).parent().parent().parent().remove();
           }
        	
        </script>
	</body>

</html>